<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市美食数据 - 美食选择助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B6B',
                        secondary: '#4ECDC4',
                        accent: '#FFD166',
                        dark: '#292F36',
                        light: '#F7FFF7',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cutlery text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">美食选择助手</h1>
            </div>
            <nav class="hidden md:flex items-center space-x-6">
                <a href="directory.html" class="text-gray-600 hover:text-primary transition-custom">首页</a>
                <a href="food_intro.html" class="text-gray-600 hover:text-primary transition-custom">食物介绍</a>
                <a href="local_specialties.html" class="text-gray-600 hover:text-primary transition-custom">地方特产</a>
                <a href="dish_detail.html" class="text-gray-600 hover:text-primary transition-custom">菜品详情</a>
                <a href="city_food_data.html" class="text-primary font-medium">城市美食数据</a>
            </nav>
            <div class="flex items-center space-x-4">
                <button id="languageToggle" class="flex items-center text-gray-600 hover:text-primary transition-custom">
                    <i class="fa fa-globe mr-1"></i>
                    <span>中文</span>
                </button>
                <button class="md:hidden text-gray-600 focus:outline-none" id="mobileMenuButton">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="hidden md:hidden bg-white shadow-lg absolute w-full">
            <div class="container mx-auto px-4 py-2 space-y-3">
                <a href="directory.html" class="block py-2 px-3 text-gray-600 hover:bg-gray-100 rounded">首页</a>
                <a href="food_intro.html" class="block py-2 px-3 text-gray-600 hover:bg-gray-100 rounded">食物介绍</a>
                <a href="local_specialties.html" class="block py-2 px-3 text-gray-600 hover:bg-gray-100 rounded">地方特产</a>
                <a href="dish_detail.html" class="block py-2 px-3 text-gray-600 hover:bg-gray-100 rounded">菜品详情</a>
                <a href="city_food_data.html" class="block py-2 px-3 bg-primary/10 text-primary rounded">城市美食数据</a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="text-center mb-12">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-3 text-shadow">城市美食数据分析</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">深入了解中国各城市的美食文化特点，通过数据可视化探索不同地区的饮食偏好和特色。</p>
        </div>

        <!-- 城市选择器 -->
        <div class="mb-10 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div class="relative flex-grow max-w-md mx-auto md:mx-0">
                <select id="citySelector" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white transition-custom appearance-none">
                    <option value="all">所有城市</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="guangzhou">广州</option>
                    <option value="shenzhen">深圳</option>
                    <option value="chengdu">成都</option>
                    <option value="hangzhou">杭州</option>
                    <option value="nanjing">南京</option>
                    <option value="wuhan">武汉</option>
                    <option value="xian">西安</option>
                    <option value="chongqing">重庆</option>
                    <option value="suzhou">苏州</option>
                    <option value="dongguan">东莞</option>
                    <option value="qingdao">青岛</option>
                    <option value="jinan">济南</option>
                    <option value="xiamen">厦门</option>
                </select>
                <i class="fa fa-map-marker absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                <i class="fa fa-chevron-down absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
            </div>
            <div class="flex flex-wrap gap-3 justify-center">
                <button id="exportDataBtn" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg flex items-center transition-custom">
                    <i class="fa fa-download mr-2"></i>
                    <span>导出数据</span>
                </button>
                <button id="shareDataBtn" class="bg-secondary hover:bg-secondary/90 text-white px-5 py-2 rounded-lg flex items-center transition-custom">
                    <i class="fa fa-share-alt mr-2"></i>
                    <span>分享数据</span>
                </button>
            </div>
        </div>

        <!-- 数据概览卡片 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
            <div class="bg-white rounded-xl shadow-md p-6 transition-custom border-l-4 border-primary">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-gray-600 font-medium">总菜品数</h3>
                    <span class="bg-primary/10 text-primary p-2 rounded-full">
                        <i class="fa fa-cutlery"></i>
                    </span>
                </div>
                <p class="text-3xl font-bold text-dark">1,248</p>
                <p class="text-green-500 text-sm flex items-center mt-2">
                    <i class="fa fa-arrow-up mr-1"></i>
                    <span>同比增长 12.5%</span>
                </p>
            </div>
            
            <div class="bg-white rounded-xl shadow-md p-6 transition-custom border-l-4 border-secondary">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-gray-600 font-medium">平均评分</h3>
                    <span class="bg-secondary/10 text-secondary p-2 rounded-full">
                        <i class="fa fa-star"></i>
                    </span>
                </div>
                <p class="text-3xl font-bold text-dark">4.6</p>
                <p class="text-green-500 text-sm flex items-center mt-2">
                    <i class="fa fa-arrow-up mr-1"></i>
                    <span>同比增长 0.3</span>
                </p>
            </div>
            
            <div class="bg-white rounded-xl shadow-md p-6 transition-custom border-l-4 border-accent">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-gray-600 font-medium">平均价格</h3>
                    <span class="bg-accent/10 text-accent p-2 rounded-full">
                        <i class="fa fa-money"></i>
                    </span>
                </div>
                <p class="text-3xl font-bold text-dark">¥45.2</p>
                <p class="text-red-500 text-sm flex items-center mt-2">
                    <i class="fa fa-arrow-up mr-1"></i>
                    <span>同比增长 5.2%</span>
                </p>
            </div>
            
            <div class="bg-white rounded-xl shadow-md p-6 transition-custom border-l-4 border-dark">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-gray-600 font-medium">平均热量</h3>
                    <span class="bg-dark/10 text-dark p-2 rounded-full">
                        <i class="fa fa-fire"></i>
                    </span>
                </div>
                <p class="text-3xl font-bold text-dark">420 kcal</p>
                <p class="text-green-500 text-sm flex items-center mt-2">
                    <i class="fa fa-arrow-down mr-1"></i>
                    <span>同比降低 3.8%</span>
                </p>
            </div>
        </div>

        <!-- 图表区域 - 第一行 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- 美食分类分布 -->
            <div class="bg-white rounded-xl shadow-md p-6 transition-custom">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-bold text-dark">美食分类分布</h3>
                    <div class="relative">
                        <select id="categoryChartPeriod" class="pl-3 pr-8 py-1 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white transition-custom appearance-none">
                            <option value="all">全部时间</option>
                            <option value="month">本月</option>
                            <option value="quarter">本季度</option>
                            <option value="year">本年度</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                    </div>
                </div>
                <div class="h-80">
                    <canvas id="categoryChart"></canvas>
                </div>
            </div>

            <!-- 城市美食热度排行 -->
            <div class="bg-white rounded-xl shadow-md p-6 transition-custom">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-bold text-dark">城市美食热度排行</h3>
                    <div class="relative">
                        <select id="cityRankingPeriod" class="pl-3 pr-8 py-1 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white transition-custom appearance-none">
                            <option value="all">全部时间</option>
                            <option value="month">本月</option>
                            <option value="quarter">本季度</option>
                            <option value="year">本年度</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                    </div>
                </div>
                <div class="h-80">
                    <canvas id="cityRankingChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 图表区域 - 第二行 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- 价格区间分布 -->
            <div class="bg-white rounded-xl shadow-md p-6 transition-custom">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-bold text-dark">价格区间分布</h3>
                    <div class="relative">
                        <select id="priceChartCity" class="pl-3 pr-8 py-1 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white transition-custom appearance-none">
                            <option value="all">所有城市</option>
                            <option value="beijing">北京</option>
                            <option value="shanghai">上海</option>
                            <option value="chengdu">成都</option>
                            <option value="guangzhou">广州</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                    </div>
                </div>
                <div class="h-80">
                    <canvas id="priceChart"></canvas>
                </div>
            </div>

            <!-- 热量分布 -->
            <div class="bg-white rounded-xl shadow-md p-6 transition-custom">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-bold text-dark">热量分布</h3>
                    <div class="relative">
                        <select id="calorieChartCity" class="pl-3 pr-8 py-1 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white transition-custom appearance-none">
                            <option value="all">所有城市</option>
                            <option value="beijing">北京</option>
                            <option value="shanghai">上海</option>
                            <option value="chengdu">成都</option>
                            <option value="guangzhou">广州</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                    </div>
                </div>
                <div class="h-80">
                    <canvas id="calorieChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 特色菜品推荐 -->
        <section class="mb-10">
            <h3 class="text-xl font-bold text-dark mb-6">热门城市特色菜品</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 北京特色菜品 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden transition-custom card-hover">
                    <div class="bg-primary/10 p-4">
                        <div class="flex items-center">
                            <img src="https://picsum.photos/id/1019/40/40" alt="北京" class="w-10 h-10 rounded-full object-cover mr-3">
                            <h4 class="font-bold text-dark">北京特色</h4>
                        </div>
                    </div>
                    <div class="p-4">
                        <ul class="space-y-3">
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">北京烤鸭</span>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-600">4.9</span>
                                </div>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">炸酱面</span>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-600">4.6</span>
                                </div>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">豆汁儿</span>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-600">4.2</span>
                                </div>
                            </li>
                        </ul>
                        <button class="w-full mt-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-custom text-sm">
                            查看更多
                        </button>
                    </div>
                </div>

                <!-- 上海特色菜品 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden transition-custom card-hover">
                    <div class="bg-secondary/10 p-4">
                        <div class="flex items-center">
                            <img src="https://picsum.photos/id/1039/40/40" alt="上海" class="w-10 h-10 rounded-full object-cover mr-3">
                            <h4 class="font-bold text-dark">上海特色</h4>
                        </div>
                    </div>
                    <div class="p-4">
                        <ul class="space-y-3">
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">小笼包</span>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-600">4.8</span>
                                </div>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">生煎包</span>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-600">4.7</span>
                                </div>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">红烧肉</span>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-600">4.6</span>
                                </div>
                            </li>
                        </ul>
                        <button class="w-full mt-4 py-2 border border-secondary text-secondary rounded-lg hover:bg-secondary/5 transition-custom text-sm">
                            查看更多
                        </button>
                    </div>
                </div>

                <!-- 成都特色菜品 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden transition-custom card-hover">
                    <div class="bg-accent/10 p-4">
                        <div class="flex items-center">
                            <img src="https://picsum.photos/id/1036/40/40" alt="成都" class="w-10 h-10 rounded-full object-cover mr-3">
                            <h4 class="font-bold text-dark">成都特色</h4>
                        </div>
                    </div>
                    <div class="p-4">
                        <ul class="space-y-3">
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">四川火锅</span>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-600">4.9</span>
                                </div>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">麻婆豆腐</span>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-600">4.8</span>
                                </div>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">担担面</span>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-600">4.7</span>
                                </div>
                            </li>
                        </ul>
                        <button class="w-full mt-4 py-2 border border-accent text-accent rounded-lg hover:bg-accent/5 transition-custom text-sm">
                            查看更多
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-cutlery text-primary text-2xl"></i>
                        <h2 class="text-xl font-bold">美食选择助手</h2>
                    </div>
                    <p class="text-gray-400 text-sm">
                        为选择困难症患者提供便捷的饮食决策服务，帮助您轻松决定每天吃什么。
                    </p>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">快速导航</h3>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li><a href="index.html" class="hover:text-primary transition-custom">首页</a></li>
                        <li><a href="food_intro.html" class="hover:text-primary transition-custom">食物介绍</a></li>
                        <li><a href="local_specialties.html" class="hover:text-primary transition-custom">地方特产</a></li>
                        <li><a href="dish_detail.html" class="hover:text-primary transition-custom">菜品详情</a></li>
                        <li><a href="city_food_data.html" class="hover:text-primary transition-custom">城市美食数据</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li class="flex items-center"><i class="fa fa-envelope mr-2 text-primary"></i> contact@foodhelper.com</li>
                        <li class="flex items-center"><i class="fa fa-phone mr-2 text-primary"></i> 400-123-4567</li>
                        <li class="flex items-center"><i class="fa fa-map-marker mr-2 text-primary"></i> 北京市海淀区中关村</li>
                    </ul>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-custom"><i class="fa fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-custom"><i class="fa fa-wechat"></i></a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-custom"><i class="fa fa-qq"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-6 text-center text-sm text-gray-500">
                <p>© 2023 美食选择助手. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 语言切换功能
        document.getElementById('languageToggle').addEventListener('click', function() {
            const currentLanguage = this.querySelector('span').textContent;
            const newLanguage = currentLanguage === '中文' ? 'English' : '中文';
            this.querySelector('span').textContent = newLanguage;
            
            // 这里可以添加实际的语言切换逻辑
            if (newLanguage === 'English') {
                document.title = 'City Food Data - Food Helper';
                document.querySelector('h2.text-center').textContent = 'City Food Data Analysis';
                document.querySelector('h2.text-center + p').textContent = 'Deeply understand the food culture characteristics of various cities in China, and explore dietary preferences and characteristics of different regions through data visualization.';
                // 更多语言切换内容...
            } else {
                document.title = '城市美食数据 - 美食选择助手';
                document.querySelector('h2.text-center').textContent = '城市美食数据分析';
                document.querySelector('h2.text-center + p').textContent = '深入了解中国各城市的美食文化特点，通过数据可视化探索不同地区的饮食偏好和特色。';
                // 更多语言切换内容...
            }
        });

        // 移动端菜单切换
        document.getElementById('mobileMenuButton').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });

        // 城市选择器变化事件
        document.getElementById('citySelector').addEventListener('change', function() {
            updateCharts(this.value);
            updateSummaryCards(this.value);
        });

        // 更新统计卡片数据
        function updateSummaryCards(city) {
            // 这里可以根据选择的城市更新统计卡片数据
            console.log('Updating summary cards for city:', city);
            // 模拟数据更新
        }

        // 更新图表数据
        function updateCharts(city) {
            // 更新美食分类分布图表
            updateCategoryChart(city);
            // 更新城市美食热度排行图表
            updateCityRankingChart(city);
            // 更新价格区间分布图表
            updatePriceChart(city);
            // 更新热量分布图表
            updateCalorieChart(city);
        }

        // 初始化图表
        function initCharts() {
            initCategoryChart();
            initCityRankingChart();
            initPriceChart();
            initCalorieChart();
        }

        // 初始化美食分类分布图表
        function initCategoryChart() {
            const ctx = document.getElementById('categoryChart').getContext('2d');
            
            window.categoryChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['早餐', '午餐', '晚餐', '小吃', '甜点', '饮品'],
                    datasets: [{
                        data: [25, 30, 25, 10, 5, 5],
                        backgroundColor: [
                            '#FF6B6B',
                            '#4ECDC4',
                            '#FFD166',
                            '#6A0572',
                            '#AB83A1',
                            '#FC5185'
                        ],
                        borderWidth: 0,
                        hoverOffset: 10
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                padding: 20,
                                usePointStyle: true
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${percentage}%`;
                                }
                            }
                        }
                    },
                    cutout: '70%'
                }
            });
        }

        // 更新美食分类分布图表
        function updateCategoryChart(city) {
            // 这里可以根据选择的城市更新图表数据
            console.log('Updating category chart for city:', city);
            // 模拟数据更新，实际应用中应该从服务器获取数据
        }

        // 初始化城市美食热度排行图表
        function initCityRankingChart() {
            const ctx = document.getElementById('cityRankingChart').getContext('2d');
            
            window.cityRankingChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['成都', '北京', '上海', '广州', '重庆', '西安', '武汉'],
                    datasets: [{
                        label: '热度指数',
                        data: [92, 88, 85, 78, 76, 72, 70],
                        backgroundColor: '#FF6B6B',
                        borderRadius: 6,
                        barThickness: 20
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    indexAxis: 'y',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `热度指数: ${context.raw}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                stepSize: 20
                            }
                        },
                        y: {
                            ticks: {
                                font: {
                                    size: 11
                                }
                            }
                        }
                    }
                }
            });
        }

        // 更新城市美食热度排行图表
        function updateCityRankingChart(city) {
            // 这里可以根据选择的城市更新图表数据
            console.log('Updating city ranking chart for city:', city);
            // 模拟数据更新
        }

        // 初始化价格区间分布图表
        function initPriceChart() {
            const ctx = document.getElementById('priceChart').getContext('2d');
            
            window.priceChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['0-20元', '21-40元', '41-60元', '61-80元', '81-100元', '100元以上'],
                    datasets: [{
                        label: '菜品数量',
                        data: [280, 350, 240, 180, 120, 78],
                        backgroundColor: '#4ECDC4',
                        borderRadius: 6,
                        barThickness: 30
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 100
                            }
                        }
                    }
                }
            });
        }

        // 更新价格区间分布图表
        function updatePriceChart(city) {
            // 这里可以根据选择的城市更新图表数据
            console.log('Updating price chart for city:', city);
            // 模拟数据更新
        }

        // 初始化热量分布图表
        function initCalorieChart() {
            const ctx = document.getElementById('calorieChart').getContext('2d');
            
            window.calorieChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['0-200kcal', '201-400kcal', '401-600kcal', '601-800kcal', '801-1000kcal', '1000kcal以上'],
                    datasets: [{
                        label: '菜品数量',
                        data: [150, 320, 450, 220, 80, 28],
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: '#FF6B6B',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: '#FF6B6B',
                        pointRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 100
                            }
                        }
                    }
                }
            });
        }

        // 更新热量分布图表
        function updateCalorieChart(city) {
            // 这里可以根据选择的城市更新图表数据
            console.log('Updating calorie chart for city:', city);
            // 模拟数据更新
        }

        // 导出数据功能
        document.getElementById('exportDataBtn').addEventListener('click', function() {
            // 模拟数据导出
            const data = {
                city: document.getElementById('citySelector').value,
                timestamp: new Date().toISOString(),
                summary: {
                    totalDishes: 1248,
                    avgRating: 4.6,
                    avgPrice: 45.2,
                    avgCalories: 420
                },
                charts: {
                    category: {
                        labels: ['早餐', '午餐', '晚餐', '小吃', '甜点', '饮品'],
                        data: [25, 30, 25, 10, 5, 5]
                    },
                    // 其他图表数据...
                }
            };
            
            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `city_food_data_${data.city}_${new Date().toISOString().split('T')[0]}.json`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            // 显示导出成功提示
            alert('数据导出成功！');
        });

        // 分享数据功能
        document.getElementById('shareDataBtn').addEventListener('click', function() {
            if (navigator.share) {
                navigator.share({
                    title: '城市美食数据',
                    text: '查看中国各城市的美食文化特点和数据分析',
                    url: window.location.href
                }).then(() => {
                    console.log('分享成功');
                }).catch((error) => {
                    console.error('分享失败:', error);
                    fallbackShare();
                });
            } else {
                fallbackShare();
            }
        });

        // 分享功能降级实现
        function fallbackShare() {
            // 复制链接到剪贴板
            navigator.clipboard.writeText(window.location.href).then(() => {
                alert('链接已复制到剪贴板，请手动分享！');
            }).catch(() => {
                alert('请复制以下链接分享：\n' + window.location.href);
            });
        }

        // 页面加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
        });
    </script>
</body>
</html>